import { useState, useEffect, } from 'react'
import { Carousel, Col, Row } from 'antd';
import { DoubleRightOutlined } from '@ant-design/icons';
import { Link, } from 'react-router-dom'
import axios from 'axios'
import "./index.less"

function Home() {
    const [dataCommodity, setDataCommodity] = useState<any>(undefined)
    useEffect(() => {
        if (!dataCommodity) {
            axios.get("http://localhost:8080/api/homeData").then((response) => {
                setDataCommodity(response.data.result);
            });
        }
    }, [dataCommodity]);

    return (
        <div className='content'>
            {/* 轮播图 */}
            <div className="carousel">
                <Carousel autoplay>
                    <div>
                        <img src="src\assets\tabs\home\rotograph\20140923141959.jpg" alt="" />
                    </div>
                    <div>
                        <img src="src\assets\tabs\home\rotograph\20140923141959.jpg" alt="" />
                    </div>
                </Carousel>
            </div>
            <div className="commodity">
                {
                    dataCommodity ?
                        dataCommodity.list.map((item: any, index: number) => {
                            return (
                                <div key={item.id} className="category">
                                    <div className="category_header">
                                        <div className="left">
                                            <span className='title'>{item.title}</span>
                                            <span>法国原产地生产、装瓶、包装的戈斯曼牌葡萄酒，假一赔十。</span>
                                        </div>
                                        <div className="right">
                                            <span>更多</span>
                                            <span><DoubleRightOutlined /></span>
                                        </div>
                                    </div>
                                    <Row>
                                        {item.commodity.map((itemCommodity: any) => (
                                            <Col key={itemCommodity.id} span={6}>
                                                <div className='commodityContent'>
                                                    <img src={itemCommodity.icon} alt="" />
                                                    <div className="price">
                                                        <span className="now">￥{itemCommodity.now.toFixed(2)}</span>
                                                        <span className="pre"><s>{itemCommodity.pre.toFixed(2)}</s></span>
                                                    </div>
                                                    <div className="commodityName">
                                                        <Link className='commodityName' style={{ color: "#996633" }} to={`/details/${itemCommodity.category}/${itemCommodity.name}/${itemCommodity.id}`}>{itemCommodity.name}</Link>
                                                    </div>
                                                    <div className="description">{itemCommodity.description}</div>
                                                </div>
                                            </Col>
                                        ))}
                                    </Row>
                                </div>
                            )
                        }) : ""
                }
            </div>
        </div>
    )
}

export default Home
